<script setup>
import {ref} from "vue";
import wechatIcon from '../assets/icons/icon_wechat.png'
import wechatIconHover from '../assets/icons/icon_wechat_hover.png'
import chen from '../assets/icons/wechat_chen.png'
import haidi from '../assets/icons/wechat_haidi.png'
import miki from '../assets/icons/wechat_miki.png'


const list = [
  {
    title: '中国深圳总部',
    mail: 'contact@tenbil.com',
    addr: '广东省深圳市南山区桂湾五路123号前海大厦T2栋401',
    phone: '+86-15507590658'
  },
  {
    title: '中国香港分部',
    mail: 'contact@tenbil.com',
    addr: '香港中環德輔道中 141 號中保集团大厦2302室',
    phone: '+852-56171166'
  },
  {
    title: '美国分部',
    mail: 'contact@tenbil.com',
    addr: '135 Madison Avenue, New York, NY, US',
    phone: '+1-4048405001'
  },
  {
    title: '加拿大分部',
    mail: 'contact@tenbil.com',
    addr: '1001 Bay St., Toronto, ON, Canada',
    phone: '+1-4164277958'
  },
  {
    title: '新加坡分部',
    mail: 'contact@tenbil.com',
    addr: '3 Church Street, Samsung Hub, Singapore',
    phone: '+65-80385483'
  },
  {
    title: '马来西亚分部',
    mail: 'contact@tenbil.com',
    addr: 'No.122, Taman Sejati 2, 32000 Sitiawan, Perak, Malaysia',
    phone: '+60-1133903821'
  }
]
const state = ref({
  wechatIcon1: wechatIcon,
  wechatIcon2: wechatIcon,
  wechatIcon3: wechatIcon,
  qrCode: chen,
  qrCodePopLeft: '0%',
  showQrcodePop: false,
})
const showWechat = (index) => {
  state.value.showQrcodePop = true;
  if (index === 1) {
    state.value.wechatIcon1 = wechatIconHover;
    state.value.qrCode = chen;
    state.value.qrCodePopLeft = '-8.8%';
  } else if (index === 2) {
    state.value.wechatIcon2 = wechatIconHover;
    state.value.qrCode = haidi;
    state.value.qrCodePopLeft = '0%';
  } else if (index === 3) {
    state.value.wechatIcon3 = wechatIconHover
    state.value.qrCode = miki;
    state.value.qrCodePopLeft = '8.8%';
  }
}
const disWechat = (index) => {
  state.value.showQrcodePop = false;
  if (index === 1) {
    state.value.wechatIcon1 = wechatIcon
  } else if (index === 2) {
    state.value.wechatIcon2 = wechatIcon
  } else if (index === 3) {
    state.value.wechatIcon3 = wechatIcon
  }
}
</script>

<template>
  <view class="column container">
    <view class="row">
      <view class="column left">
        <img class="logo" src="../assets/icons/logo.png" alt=""/>
        <view class="font18 top4">天比邻科技服务（深圳）有限公司</view>
        <view class="font14 top1">天比邻科技，品牌出海先行者</view>
        <view class="row icons">
          <img :src="state.wechatIcon1" alt="" @mouseenter="showWechat(1)" @mouseleave="disWechat(1)"/>
          <img :src="state.wechatIcon2" alt="" @mouseenter="showWechat(2)" @mouseleave="disWechat(2)"/>
          <img :src="state.wechatIcon3" alt="" @mouseenter="showWechat(3)" @mouseleave="disWechat(3)"/>
        </view>
        <view class="column wechat-pop" v-if="state.showQrcodePop" :style="{left: state.qrCodePopLeft}">
          <img class="qrCode" :src="state.qrCode" alt=""/>
          <view class="text">欢迎扫码</view>
          <view class="text">免费咨询</view>
        </view>
      </view>
      <view class="right">
        <view class="column item" v-for="(item, i) in list" :key="i">
          <view class="font20">{{ item.title }}</view>
          <view class="font16 top2">{{ item.mail }}</view>
          <view class="font16 top2" style="line-height: 2">{{ item.addr }}</view>
          <view class="font16">联系方式：{{ item.phone }}</view>
        </view>
      </view>
    </view>
    <view class="column copyright font14">
      <view class="line"/>
      <view class="top2">© 2024版权所有</view>
      <view>ICP备18474368号</view>
      <img src="../assets/images/img_footer_net.png" width="8.9%" alt=""/>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (1133 / 1920));
  padding-top: 10%;

  .wechat-pop {
    position: relative;
    top: -44%;
    left: -9%;
    width: 24%;
    height: 34%;
    border-radius: 8px;
    background-color: white;
    color: black;
    align-items: center;

    .qrCode {
      width: 80%;
      margin: 10%;
    }

    .text {
      font-size: 1.2em;
      font-weight: bold;
    }
  }

  .left {
    flex: 0.42;

    .logo {
      width: 40%;
    }

    .icons {
      margin-top: 10%;

      img {
        margin-right: 10px;
        width: 7%;
        cursor: pointer;
      }
    }
  }

  .right {
    flex: 0.58;
    display: grid;
    height: calc(100vw * (700 / 1920));
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(4, 16%);
    grid-row-gap: 12%;

    .item {
      padding-left: 4%;
      border-left: solid 1px white;
      /*opacity: 0;*/
      /*animation: bottomIn 1s ease-in forwards;*/
    }
  }

  .copyright {
    align-items: center;

    .line {
      width: 100%;
      border-top: solid 1px rgba(255, 255, 255, 0.5);
    }
  }
}
</style>